<template>
    <div>
      <h1>盘管理系统</h1>
      <p>
        <label>
          <el-avatar :size="50" :src="circleUrl"></el-avatar>
          <input type="file" style="display: none" @change="changeHeard" id="files"></input>
        </label>
        <el-dropdown>
            <span class="el-dropdown-link">
              {{uesrNames}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native.prevent="personageFn">个人中心</el-dropdown-item>
            <el-dropdown-item @click.native.prevent="connectorDebugFN">在线接口测试</el-dropdown-item>
            <el-dropdown-item @click.native.prevent="outUser">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
              circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
              uesrNames:'',
            }
        },
      mounted(){
        this.uesrNames = localStorage.getItem('UserName')
      },
        methods: {
            changeHeard:function () {
              var that=this;
              var files = document.getElementById('files');
              var upload_file = files.files[0];
              var resder = new FileReader();
              resder.readAsDataURL(upload_file);
              resder.onload = function (e) {
                that.circleUrl = this.result
              }
            },
          outUser:function () {
            this.exitLogin()
          },
          personageFn:function () {
            this.$router.push('/personagePage')
          },
          connectorDebugFN:function () {
            this.$router.push('/connectorDebug')
          }
        },
    }
</script>

<style scoped>
  h1{
    font-size: 25px;
    float: left;
  }
  p{
    float: right;
    height: 60px;
    line-height: 60px;
  }
  label{
    cursor: pointer;
    float: left;
    margin: 5px;
  }
  .el-dropdown-link{
    display: inline-block;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 16px;
    margin-left: 10px;
    cursor: pointer;
  }
</style>
